<template>
  <div class="detail" @click="toDetail">查看详情</div>
</template>
<script>
import { useRouter } from "vue-router";
export default {
  props: ["model"],
  setup(props) {
    //按钮逻辑
    const router = useRouter();
    const toDetail = () => {
        router.push({
          name: "Detail",
          query: {
            model: props.model.substring(props.model.indexOf(' ')+1),
          },
        });
    };
    return { toDetail };
  },
};
</script>
<style lang="scss" scoped>
@import "@/style/viriables.scss";
.detail {
  display: inline-block;
  width: 7.3rem;
  height: 2.5rem;
  text-align: center;
  line-height: 2.5rem;
  background-color: $lignt-yellow;
  border-radius: 0.4rem;
  color: white;
  font-size: 1.3rem;
  cursor: pointer;
  transition: 0.3s ease;
}
.detail:hover {
  background-color: $deep-yellow;
}
</style>